<template>
  <div class="lang-selector">
    <el-dropdown  @command="handleSetLanguage">
      <span>
        <svg-icon name="language" class="text-gray-500" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :disabled="locale==='zh-cn'" command="zh-cn">
            {{t('language.zh')}}
          </el-dropdown-item>
          <el-dropdown-item :disabled="locale==='en'" command="en">
            {{t('language.en')}}
          </el-dropdown-item>
          <el-dropdown-item :disabled="locale==='ja'" command="ja">
            {{t('language.ja')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup name="lang-selector">
import { state } from '@/utils';

const { t, locale } = useI18n();

const handleSetLanguage = (lang) => {
  locale.value = lang;
  state.value = lang;
  window.location.reload();
};
</script>

<style scoped>
</style>
